<template>
	<div class="header">
		<p class="title">待办事项</p>
		<!-- @keyup.enter监听回车键事件，触发addfun函数 -->
		<input class="new-todo" type="text" placeholder="请填写任务" v-model.trim="newitem" @keyup.enter="addfun"/>
	</div>
</template>
 
<script setup>
import { ref } from 'vue'
// 定义自定义事件发射器，声明触发"additem"事件 子向父传值
const emit = defineEmits(["additem"])
// // 使用ref定义响应式数据newitem，用于存储输入的待办事项内容
const newitem=ref('')
// 添加待办事项的函数：// 1. 通过emit触发"additem"事件，传递name.value作为参数
// 2. 清空输入框内容（重置name.value为空字符串）
const addfun=()=>{
	emit('additem',newitem.value)
	newitem.value = ''
}
</script>

<style>
.header {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    padding: 30px;
    background: linear-gradient(135deg, #64b3f4 0%, #c2e59c 100%);
    text-align: center;
    border-radius: 10px;
    margin-bottom: 20px;
}

.title {
    margin: 0;
    font-size: 52px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.new-todo {
    width: 90%;
    padding: 18px 22px;
    height: auto;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 1.4rem;
    margin-top: 25px;
    outline: none;
    transition: box-shadow 0.3s;
}

.new-todo:focus {
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(100, 108, 255, 0.6);
}
</style>